.component {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  padding-inline: var(--gap-md);
  font: var(--font-statuses);
}

.popover-icon {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: -5%;
}

.dropdown {
  display: flex;
  flex-direction: column;
  background-color: var(--white-accent-clr);
  box-shadow: 0 var(--gap-xs) var(--gap-md) 1px rgb(34 139 207 / 25%);
}

.dropdown-hover {
  padding: var(--gap-sm) var(--gap-main);
  transition: background-color 0.3s ease-in-out;
}
